<!-- 查询用户信息 -->
<template>
    <div>
        <div class="table-page-search-wrapper">
            <a-form layout="inline">
                <a-row :gutter="48">
                    <a-col :md="8" :sm="12">
                        <a-form-item label="手机号">
                            <a-input v-model="phone" allow-clear placeholder="请输入用户手机号" />
                        </a-form-item>
                    </a-col>
                    <a-col :md="8" :sm="12">
                        <a-form-item label="姓名">
                            <a-input v-model="userName" allow-clear placeholder="请输入用户姓名" />
                        </a-form-item>
                    </a-col>
                    <a-col :md="8" :sm="12">
                        <a-form-item label="供应商">
                            <a-select v-model="supplier" show-search placeholder="请选择供应商" allowClear @change="getData">
                                <a-select-option v-for="(item) in makeList" :key="item.id + item.makeName" :value="item.makeName">{{item.makeName}}</a-select-option>
                            </a-select>
                            <!-- <a-input v-model="supplier" allow-clear placeholder="请输入供应商名称" /> -->
                        </a-form-item>
                    </a-col>
                    <a-col :md="8" :sm="12">
                        <a-form-item label="订单号">
                            <a-input v-model="orderCode" allow-clear placeholder="请输入订单号" />
                        </a-form-item>
                    </a-col>
                       <a-col :md="8" :sm="12">
                        <a-form-item label="支付订单号">
                            <a-input v-model="payOrderCode" allow-clear placeholder="请输入支付订单号" />
                        </a-form-item>
                    </a-col>
                    <a-col :md="8" :sm="12">
                        <a-form-item label="订单状态">
                            <a-select v-model="orderStatus" placeholder="请选择" allowClear @change="query">
                                <a-select-option v-for="(item,i) in orderStatusList" :key="i" :value="item.id">{{item.name}}</a-select-option>
                            </a-select>
                        </a-form-item>
                    </a-col>
                    <a-col :md="8" :sm="12">
                        <a-form-item label="订单日期">
                            <a-range-picker @change="onChange" allowClear/>
                        </a-form-item>
                    </a-col>
                    <a-col :md="8" :sm="12">
                        <a-form-item >
                            <a-button type="primary" @click="query()">查询</a-button>
                               <a-button style="margin-left: 20px" @click="_excelGoodsOrder()">导出</a-button>
                        </a-form-item>
                    </a-col>
                    <a-col :md="8" :sm="12">
                        <a-form-item >
                            <a-button type="primary" @click="downloadExcelTem()">下载物流导入模板</a-button>
                            <a-upload
                                style="display: inline-block;margin-left: 20px"
                                :before-upload="beforeUpload"
                                @change="handleChange"
                                :fileList="[]"
                            >
                                <a-button> <a-icon type="upload" />导入物流信息</a-button>
                            </a-upload>
                        </a-form-item>
                    </a-col>
                </a-row>
                
            </a-form>
        </div>

        <a-table size="small" rowKey="id" :loading="isload" :columns="columns" :data-source="dataList" @change="handleTableChange" :pagination="{ pageSize: 5, total: total ,showSizeChanger: true,pageSize: size}"  :scroll="{ x: 2000 }"  >
           <template slot="goodsInfo" slot-scope="text, record">
             <a-list item-layout="vertical" size="small" :pagination="false" :data-source="[JSON.parse(record.goodsInfo)]">
                <a-list-item slot="renderItem" key="item.title" slot-scope="item, index">
                    <template  slot="actions" >
                        <span style="margin-right: 4px" >
                         总金额:{{record.totalPrice}}
                        </span>
                    </template>
                      <template  slot="actions"  >
                        <span style="margin-right: 4px" >
                          折扣金额:{{record.discountAmount}}
                        </span>
                    </template>
                     <template  slot="actions"  >
                        <span  >
                            付款金额:{{ record.payAmount }}({{ record.paymentMethod }})
                        </span>
                    </template>
                <a-list-item-meta :description="item.specInfo">
                    <a slot="title" >{{ item.goodsName }}</a>
                    <a-avatar slot="avatar" :src="item.goodsPicture" />
                </a-list-item-meta>
                 <span style="margin-right: 10px" > 数量:{{record.quantity}}</span>    
                 <span style="margin-right: 10px" >  积分:{{record.totalIntegral}}</span>  
                <span  >  运费:{{record.totalFreight}}</span>    
                </a-list-item>
            </a-list>
           </template>
           <template slot="phone" slot-scope="text, record" >
                <a-list item-layout="horizontal"  size="small"  :data-source="[record]">
                <a-list-item slot="renderItem" slot-scope="item, index">
                    <a-list-item-meta :description="'手机号:'+item.phone " >
                        <a slot="title" >姓名：{{item.userName }}</a>
                    </a-list-item-meta>
                </a-list-item>
            </a-list>
           </template>
            <template slot="orderCode" slot-scope="text, record" >
                <a-list item-layout="horizontal"  size="small" :data-source="[record]">
                <a-list-item slot="renderItem" slot-scope="item, index">
                    <a-list-item-meta :description="'支付单号:'+item.payOrderCode " >
                        <a slot="title" >订单号:{{ item.orderCode }}</a>
                    </a-list-item-meta>
                </a-list-item>
            </a-list>
           </template>
            <template slot="receivingAddressInfo" slot-scope="text, record" >
                <a-list item-layout="vertical" size="small" :pagination="false" :data-source="[JSON.parse(record.receivingAddressInfo)]">
                <a-list-item slot="renderItem" key="item.title" slot-scope="item, index">
                <a-list-item-meta :description="item.province+'-'+item.city+'-'+item.area">
                    <a slot="title" >{{ item.receiver }}-{{item.receiverPhone}}</a>
                </a-list-item-meta>
                    {{item.detailedAddress}}  <a-tag color="red" >{{item.tag}}</a-tag>  
                </a-list-item>
            </a-list>
           </template>
            <template slot="orderType" slot-scope="text, record">
                 <a-tag color="red" v-if="record.orderType==0" >商城</a-tag>  
                  <a-tag color="pink" v-else-if="record.orderType==1" >拼团</a-tag>  
                    <a-tag color="orange" v-else-if="record.orderType==3" >新人专享</a-tag>  
            </template>
             <template slot="orderStatus" slot-scope="text, record">
                 <a-tag :color="orderStatuss(record.orderStatus)[1]"  >{{orderStatuss(record.orderStatus)[0]}}</a-tag>  
            </template>
             <template slot="express" slot-scope="text, record">
                <a-button type="link" v-if="record.orderStatus==2 || record.orderStatus==3 || record.orderStatus==4 || record.orderStatus==9 || record.orderStatus==10"  @click="showDrawer(record)">查看快递进度</a-button>
                  <a-button type="link" v-else-if="record.orderStatus==1 "  @click="updateStatus(record)">去发货</a-button>
                    <a-button type="link" v-else  >暂无操作</a-button>
                <a-button type="link" v-if="record.orderStatus==2" @click="updateStatus(record)">修改快递信息</a-button>
             </template>
        </a-table>
        <a-drawer width="800"  title="查询物流信息"  placement="right" :closable="true" :visible="visible" @close="onClose">
             <a-descriptions title="商品信息">
                   <a-descriptions-item label="商品名称">
                    {{item.goodsInfos.goodsName}}
                </a-descriptions-item>
                  <a-descriptions-item label="时间" >
                     <a-steps progress-dot size="small" :current="1" >
                        <a-step title="支付时间" :description="item.paymentTime" />
                        <a-step title="发货时间" :description="item.deliveryTime" />
                        <a-step title="确认收货时间" :description="item.confirmTime" />
                        <a-step title="评价时间" :description="item.evaluateTime" />
                    </a-steps>
                </a-descriptions-item>
            </a-descriptions>   
            <a-descriptions title="收货信息">
                <a-descriptions-item label="姓名">
                {{item.receivingAddressInfos.receiver}}
                </a-descriptions-item>
                <a-descriptions-item label="手机号">
                {{item.receivingAddressInfos.receiverPhone}}
                </a-descriptions-item>
                    <a-descriptions-item label="地址">
                    {{item.receivingAddressInfos.province}}-{{item.receivingAddressInfos.city}}-{{item.receivingAddressInfos.area}}
                </a-descriptions-item>
                    <a-descriptions-item label="详情">
                    {{item.receivingAddressInfos.detailedAddress}}<a-tag color="red" >{{item.receivingAddressInfos.tag}}</a-tag>  
                 </a-descriptions-item>
            </a-descriptions>
             <a-descriptions title="快递信息"  >
                   <a-descriptions-item label="logo">
                       <a-avatar :src="express.logo" />
                    </a-descriptions-item>
                     <a-descriptions-item label="快递公司">
                     {{express.expName}}
                    </a-descriptions-item>
                     
                    <a-descriptions-item label="快递单号">
                        {{express.number}}
                    </a-descriptions-item>
                    <a-descriptions-item label="运输时间">
                        {{express.takeTime}}
                    </a-descriptions-item>
                    <a-descriptions-item label="更新时间">
                        {{express.updateTime}}
                    </a-descriptions-item>
                    <a-descriptions-item label="快递官网">
                       <a :href="express.expSite">{{express.expSite}} </a> 
                    </a-descriptions-item>
                <a-descriptions-item label="快递进度">
                   <a-steps progress-dot :current="1"   direction="vertical">
                        <a-step  style="width:700px"  v-for="(items,index) in express.list" :title="items.time" :description="items.status" />
                    </a-steps>
                </a-descriptions-item>
            </a-descriptions>
        </a-drawer>
           <a-drawer width="600" title="订单发货"  placement="right" :closable="true" :visible="statusTrueFalseBy" @close="onClose">
                 <a-descriptions title="商品信息">
                   <a-descriptions-item label="商品名称">
                    {{item.goodsInfos.goodsName}}
                </a-descriptions-item>
            </a-descriptions> 
              <a-descriptions title="订单时间">
                <a-descriptions-item  >
                    <a-steps progress-dot size="small" :current="1" >
                        <a-step title="创建时间" :description="item.createTime" />
                        <a-step title="支付时间" :description="item.paymentTime" />
                        <a-step title="发货时间" :description="item.deliveryTime" />
                        <a-step title="确认收货时间" :description="item.confirmTime" />
                        <a-step title="评价时间" :description="item.evaluateTime" />
                    </a-steps>
                </a-descriptions-item> 
              </a-descriptions> 
            <a-descriptions title="收货信息">
                <a-descriptions-item label="姓名">
                {{item.receivingAddressInfos.receiver}}
                </a-descriptions-item>
                <a-descriptions-item label="手机号">
                {{item.receivingAddressInfos.receiverPhone}}
                </a-descriptions-item>
                    <a-descriptions-item label="地址">
                    {{item.receivingAddressInfos.province}}-{{item.receivingAddressInfos.city}}-{{item.receivingAddressInfos.area}}
                </a-descriptions-item>
                    <a-descriptions-item label="详情">
                    {{item.receivingAddressInfos.detailedAddress}}<a-tag color="red" >{{item.receivingAddressInfos.tag}}</a-tag>  
                 </a-descriptions-item>
            </a-descriptions>
              <a-descriptions title="快递信息"  > </a-descriptions>
               <a-form  style="width:600px"  :label-col="{ span: 4 }" :wrapper-col="{ span: 14 }">
                    <a-form-item label="快递公司">
                        <a-input v-model="expressCompany" placeholder="请输入快递公司" allow-clear></a-input>
                    </a-form-item>
                      <a-form-item label="快递单号">
                        <a-input v-model="expressNumber"   placeholder="请输入快递单号" allow-clear></a-input>
                    </a-form-item>
                      <a-form-item  label=" "  :wrapper-col="{ span: 14 }">
                        <a-button type="primary" @click="_updateGoodsOrderStatus(item)"  >填写订单信息</a-button>
                    </a-form-item>
                </a-form>
           </a-drawer>
    </div>
</template>

<script>
import { columns } from './table';
import { queryGoodsOrder, queryGoodsOrderExpress,updateGoodsOrderStatus,excelGoodsOrder , updateGoodsOrderReceiveExcel , downloadGoodsOrderReceiveExcelTem } from '@/api/mall/order';
import { queryMake } from '@/api/mall/make';
import { queryBrand }  from '@/api/brand';
export default {
    data () {
        return {
            brandId: this.global.brandId,
            brandList: [],
            isload: false,
            dataList: [],
            columns,
            total: 0,
            page: 1,
            size: 5,
            phone: '',
            userName: '',
            startTime: '', // 开始时间
            endTime: '', // 结束时间
            orderCode:"",//订单号
            payOrderCode:"",//支付订单号
            supplier: undefined, // 供应商名称
            visible: false,
            orderStatus:"",
            orderStatusList:[
                {id:'0',name:'待付款'},
                {id:'1',name:'待发货'},
                {id:'2',name:'待收货'},
                {id:'3',name:'待评价'},
                {id:'4',name:'已完成'},
                {id:'5',name:'已取消'},
                {id:'6',name:'已关闭'},
                {id:'7',name:'退款中'},
                {id:'8',name:'退款成功'},
                {id:'9',name:'退货中'},
                {id:'10',name:'退货成功'},
            ],
            orderType:"",
            // orderTypeList:[
            //     {id:'0',name:'商城'},
            //     {id:'1',name:'拼团'},
            //     {id:'2',name:'新人专享'},
            // ],
            express:{},
            item:{
                goodsInfos:{
                    goodsName:""
                },
                receivingAddressInfos:{
                    receiver:"",
                    receiverPhone:"",
                    province:"",
                    city:"",
                    area:"",
                    detailedAddress:"",

                }
            },
            statusTrueFalseBy:false,
            expressCompany:"",
            expressNumber:"",
            makeList: [],
        };
    },
    components: {
    },
    async created(){
        try {
            // this.gradeList = await this.getGrade()
            this._getAllData();
            // this.getData()
        } catch (error) {
            this.$notification['error']({
                message: '提示',
                description: '网路丢失，请稍后再试！',
                duration: 8,
            })
        }
    },
    methods: {
        onChange(date, dateString) {
            console.log(date, dateString);
            this.startTime = dateString[0]
            this.endTime = dateString[1]
            this.getData()
        },
        query(){
            this.page=1
             this.getData()
        },
        // 查询会员信息
        getData(){
            let _this = this
             var startTime,endTime
            if(_this.startTime!='' || _this.endTime !=''){
                startTime=_this.startTime+' 00:00:00'
                endTime=_this.endTime+' 23:59:59'
            }
            const params = {
                'brandId':_this.brandId,
                'phone':_this.phone,
                'userName':_this.userName,
                'orderCode':_this.orderCode,
                'payOrderCode':_this.payOrderCode,
                'orderStatus':_this.orderStatus,
                'orderType':_this.orderType,
                'startTime':startTime,
                'endTime':endTime,
                'page':_this.page - 1,
                'size':_this.size,
                'supplier': _this.supplier,
            }
            queryGoodsOrder(params)
            .then(res=>{
                if(res.success){
                    _this.dataList = res.data.content
                    _this.total = res.data.totalElements
                }else{
                    _this.$notification['error']({
                        message: '提示',
                        description: res.errMessage,
                        duration: 8,
                    })
                }
            })
        },
        orderStatuss(val){
            if(val==0){
                return ['待付款','#ffd333']
            }else if(val==1){
                return ['待发货','#ffd333']
            }else if(val==2){
                return ['待收货','#ffd333']
            }else if(val==3){
                return ['待评价','#ffd333']
            }else if(val==4){
                return ['已完成','#87d068']
            }else if(val==5){
                return ['已取消','#f5222d']
            }else if(val==6){
                return ['已关闭','#f5222d']
            }else if(val==7){
                return ['退款中','#ffd333']
            }else if(val==8){
                return ['退款成功','#87d068']
            }else if(val==9){
                return ['退货中','#ffd333']
            }else if(val==10){
                return ['退货成功','#87d068']
            }
        },
        // 分页
        handleTableChange(pagination, filters, sorter) {
            console.log(pagination);
            this.page = pagination.current;
            this.size = pagination.pageSize;
            this.getData()
        },
        // 查询订单
         showDrawer(item) {
             var _this=this
                item.goodsInfos=JSON.parse(item.goodsInfo)
                item.receivingAddressInfos=JSON.parse(item.receivingAddressInfo)
                _this.item=item
             const params = {
                'orderCode':item.orderCode,
            }
             queryGoodsOrderExpress(params)
            .then(res=>{
                if(res.success){
                    console.log(res,"快递信息")
                    this.express=res.data
                     this.visible = true;
                }else{
                    _this.$notification['error']({
                        message: '提示',
                        description: res.errMessage,
                        duration: 8,
                    })
                }
            })
           
         },
         updateStatus(item){
            item.goodsInfos=JSON.parse(item.goodsInfo)
            item.receivingAddressInfos=JSON.parse(item.receivingAddressInfo)
            this.item=item
            this.expressCompany=""
            this.expressNumber=""
            this.statusTrueFalseBy=true
         },
         _updateGoodsOrderStatus(item){
             var _this=this
               const params = {
                'orderCode':item.orderCode,
                'expressCompany':_this.expressCompany,
                'expressNumber':_this.expressNumber,
            }
             updateGoodsOrderStatus(params)
                .then(res=>{
                    if(res.success){
                        _this.$notification['success']({
                        message: '提示',
                        description: '发货成功',
                        duration: 8,
                    })
                    _this.getData()
                    _this.statusTrueFalseBy = false;
                    }else{
                        _this.$notification['error']({
                            message: '提示',
                            description: res.errMessage,
                            duration: 8,
                        })
                    }
                })
           

         },
        onClose() {
             this.visible = false;
             this.statusTrueFalseBy=false
        },
        _excelGoodsOrder(){
                let _this = this
             var startTime,endTime
            if(_this.startTime!='' || _this.endTime !=''){
                startTime=_this.startTime+' 00:00:00'
                endTime=_this.endTime+' 23:59:59'
            }
              const params = {
                'brandId':_this.brandId,
                'phone':_this.phone,
                'userName':_this.userName,
                'orderCode':_this.orderCode,
                'payOrderCode':_this.payOrderCode,
                'orderStatus':_this.orderStatus,
                'orderType':_this.orderType,
                'startTime':startTime,
                'endTime':endTime,
                'page':_this.page - 1,
                'size':_this.total,
                 'isExportExcel':1
            }
            excelGoodsOrder(params)
            .then(res=>{
                if(res){
                      const content = res
                      console.log(res,"res")
                        const blob = new Blob([content])
                        const fileName = '订单列表.xlsx'
                        if ('download' in document.createElement('a')) { // 非IE下载
                        const elink = document.createElement('a')
                        elink.download = fileName
                        elink.style.display = 'none'
                        elink.href = URL.createObjectURL(blob)
                        document.body.appendChild(elink)
                        elink.click()
                        URL.revokeObjectURL(elink.href) // 释放URL 对象
                        document.body.removeChild(elink)
                        } else { // IE10+下载
                        navigator.msSaveBlob(blob, fileName)
                        }
                }else{
                    _this.$notification['error']({
                        message: '提示',
                        description: res.errMessage,
                        duration: 8,
                    })
                }
            })
       },
        // 获取品牌商列表
        _getMake(){
            let _this = this
            let page = 0
            const fn = function(){
                const params = {
                    'brandId':_this.brandId,
                    'size':100,
                    'page':page,
                }
                queryMake(params)
                .then(res=>{
                    if(res.success){
                        if(page == 0){
                            _this.makeList = res.data.content
                        }else{
                            _this.makeList = [..._this.makeList,...res.data.content]
                        }
                        if((res.data.totalElements > (page + 1) * 99)){
                            page++;
                            fn()
                        }
                    }else{
                        _this.$notification['error']({
                            message: '提示',
                            description: res.errMessage,
                            duration: 8,
                        })
                    }
                })
            }
            fn()
        },
        _getAllData(){
            this._getMake();
            this.getData();
        },
        // 下载物流单号导入模板
        downloadExcelTem(){
            let _this = this;
            const params = {
                'isExport': '1',
                'isImport': '0',
            }
            downloadGoodsOrderReceiveExcelTem(params)
            .then(res => {
                if(res){
                    _this.downloadVisible = false;
                    const content = res
                    console.log(res,"res")
                    let blob = new Blob([content], {type: 'application/x-excel'});
                    const fileName = '物流单号导入表格.xlsx'
                    if ('download' in document.createElement('a')) { // 非IE下载
                        const elink = document.createElement('a')
                        elink.download = fileName
                        elink.style.display = 'none'
                        elink.href = URL.createObjectURL(blob)
                        document.body.appendChild(elink)
                        elink.click()
                        URL.revokeObjectURL(elink.href) // 释放URL 对象
                        document.body.removeChild(elink)
                    } else { // IE10+下载
                        navigator.msSaveBlob(blob, fileName)
                    }
                }else{
                    _this.$notification['error']({
                        message: '提示',
                        description: res.errMessage,
                        duration: 8,
                    })
                }
            })
        },
        // 上传结算单
        beforeUpload(file) {
            return false;
        },
        handleChange({file,fileList}){
            let _this = this
            const formData = new FormData();
            formData.append('file',file)
            formData.append('isExport','0')
            formData.append('isImport','1')
            updateGoodsOrderReceiveExcel(formData)
            .then(res=>{
                if(res.success){
                    _this.$notification['success']({
                        message: '温馨提示',
                        description: '导入成功',
                        duration: 8
                    })
                    _this.getData();
                }else{
                    _this.$notification['error']({
                        message: '温馨提示',
                        description: res.errMessage,
                        duration: 8
                    })
                }
            })
        },
    }
}

</script>
<style scoped>
.ant-steps-vertical .ant-steps-item-content{
    width: 90% !important;
}

</style>